﻿.switch {
    --bb-switch-padding: 7px 0;
    --bb-switch-border-color: #dcdfe6;
    --bb-switch-bg: #dcdfe6;
    --bb-switch-border-radius: 10px;
    --bb-switch-bar-width: 16px;
    --bb-switch-bar-height: 16px;
    --bb-switch-bar-bg-color: #fff;
    --bb-switch-bar-radius: 50%;
    --bb-switch-bar-top: 1px;
    --bb-switch-bar-off: 1px;
    --bb-switch-bar-on: 1px;
    --bb-switch-inner-text-font-size: 80%;
    --bb-switch-inner-on-text-left: 7px;
    --bb-switch-inner-on-text-color: #fff;
    --bb-switch-inner-off-text-left: 20px;
    --bb-switch-inner-off-text-color: #606266;
    --bb-switch-disabled-opacity: var(--bb-disabled-opactiy);
    --bb-switch-label-margin-left: 10px;
    display: inline-flex;
    align-items: center;
    width: 100%;
    padding: var(--bb-switch-padding);
}

    .switch.disabled {
        opacity: var(--bb-switch-disabled-opacity);
    }

    .switch .switch-core {
        margin: 0;
        display: inline-block;
        position: relative;
        border: 1px solid var(--bb-switch-border-color);
        outline: none;
        border-radius: var(--bb-switch-border-radius);
        box-sizing: border-box;
        background: var(--bb-switch-bg);
        cursor: pointer;
        transition: border-color .3s, background-color .3s;
        vertical-align: middle;
    }

        .switch .switch-core:after {
            content: "";
            position: absolute;
            top: var(--bb-switch-bar-top);
            border-radius: var(--bb-switch-bar-radius);
            transition: all .3s;
            width: var(--bb-switch-bar-width);
            height: var(--bb-switch-bar-height);
            background-color: var(--bb-switch-bar-bg-color);
        }

        .switch .switch-core:before {
            content: attr(data-inner-text);
            position: absolute;
            top: var(--bb-switch-bar-top);
            left: var(--bb-switch-inner-off-text-left);
            transition: all .3s;
            font-size: var(--bb-switch-inner-text-font-size);
            color: var(--bb-switch-inner-off-text-color);
        }

    .switch.is-checked .switch-core:before {
        left: var(--bb-switch-inner-on-text-left);
        color: var(--bb-switch-inner-on-text-color);
    }

    .switch:not(.is-checked) .switch-core:after {
        left: var(--bb-switch-bar-off);
    }

    .switch.is-checked .switch-core:after {
        right: var(--bb-switch-bar-on);
    }

    .switch .switch-label {
        margin-left: var(--bb-switch-label-margin-left);
        cursor: pointer;
    }
